import styled from "@emotion/styled"
import { useMount, useUnmount } from "ahooks"
import React from "react"
import { useState } from "react"
import PageLayout from "../../components/core/PageLayout"
import { FlexContentBox } from "../../components/styled"
import BasicGroup from "./group/basicGroup"
import CustomerGroup from "./group/customerGroup"
import GuarantorInfosGroup from "./group/guarantorInfosGroup"
import { useInputViewInit } from "./helper/init"

export interface ActionGroup {
    title: string
    groupkey: string
}

const TABS = ["基本信息", "客户信息", "担保信息", "产品方案", "渠道信息", "车辆信息", "报价信息", "尽调信息", "其他", "进件附件", "客户经理意见", "审批记录"]

const getActionGroup = (index: number) => {
    const list = [
        <BasicGroup groupkey={`BasicGroup_${index}`} title={TABS[index]} />,
        <CustomerGroup groupkey={`CustomerGroup_${index}`} title={TABS[index]} />,
        <GuarantorInfosGroup groupkey={`GuarantorInfosGroup_${index}`} title={TABS[index]} />,
    ]
    return list[index]
}

const calcSize = (): number => {
    return window.innerHeight - 72
}

const IntentionalForm = () => {
    const [active, setActive] = useState<number>(0)
    useInputViewInit()

    useMount(() => {
        document.addEventListener("keydown", onKeyDown)
    })

    useUnmount(() => {
        document.removeEventListener("keydown", () => null)
    })

    const onKeyDown = (e: any) => {
        switch (e.keyCode) {
            case 38: //键盘 - ↑
                setActive(active ? active - 1 : active)
                break;
            case 40: //键盘 - ↓
                setActive(active < 11 ? active + 1 : active)
                break;

            default:
                break;
        }
    }

    return <PageLayout className="intent_container" title="进件服务" subTitle="进件录入">
        <MyFlexContentBox style={{ height: `${calcSize()}px` }}>
            {
                TABS.map((_item, index) => {
                    return <React.Fragment key={`IntentionalForm_group${index}`}>
                        {getActionGroup(index)}
                    </React.Fragment>
                })
            }
        </MyFlexContentBox>
    </PageLayout>
}

const MyFlexContentBox = styled(FlexContentBox)`
    display:flex;
    flex-direction: column;
    width: 100%;
    overflow-x: scroll;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
`

export default IntentionalForm